<template>
	<div>
		<el-table v-on="$listeners" :data="tableDatas" @selection-change="Fn('getRows',$event)" border @row-click="Fn('rowClick',$event) "
			:fit="options.fit" highlight-current-row row-key="id">
			<slot name="column-start" />
			<div v-for="(row, key) in columnsData" :key="key">
				<slot v-if="row.type=='slot'" :name="row.name" />
				<XcTableColumnIndex :row="row" v-if="['index','selection'].includes(row.type)" />
				<XcTableColumnTag :row="row" v-if="['tag'].includes(row.type)" />
				<XcTableColumnImg :row="row" v-if="['img'].includes(row.type)" />
				<XcTableColumnButton :row="row" v-if="['button'].includes(row.type)" />
				<XcTableColumnDefault :row="row" v-if="!row.type" />
			</div>
			<slot name="column-end" />
		</el-table>
		<pagination v-show="query.total>0" :total="query.total" :page.sync="query.page" :limit.sync="query.page_size"
			@pagination="Fn('search',true)" />
	</div>
</template>

<script>
	/**
 * @param {tag}"", "success", "info", "warning", "danger",
 * @description 
  [
    { label: "序", width: "55", type: "index" },
    { label: "角色名称", prop: "name" },
    { label: "角色类型", prop: "role",
      tag: {
        rules: [ { type: "warning", value: "供应商" }, ],
      },
    },
    { label: "操作",
      handles: [ { method: "handleAdd", text: "新增", }],
    },
  ],
 */
	export default {
		name: "ElColumns",
		inject: ["vm"],
		props: {
			options: {
				type: Object,
				default () {
					return {
						fit: true,
					};
				},
			},
			list: {
				type: Array,
				default () {
					return [];
				},
			},
			option: String,
		},
		computed: {
			// 表格数据
			tableDatas() {
				return this.vm.list;
			},
			// 表格列
			columnsData() {
				try {
					if (this.option) return this.vm[this.option];
					return this.vm.pageDatas.data;
				} catch (error) {
					return [];
				}
			},
			// 表格查询
			query() {
				return this.vm.formData;
			},
		},
		methods: {
			// 方法调用
			Fn(method, row) {
				try {
					if (this.vm[method]) this.vm[method](row);
				} catch (e) {
					console.log(1313, e);
					this.openMessage(`未定义方法 ${method}`, "warning");
				}
			},
		},
	};
</script>

<style>
</style>